<script setup lang="ts">
import { ref, onMounted, toRaw, reactive } from 'vue'
import { useRouter } from "vue-router";
import { teachClassesList } from '../../stores/api/class'
import { message } from 'ant-design-vue';
import { useCounterStore } from '../../stores/counter'
import { UserOutlined } from '@ant-design/icons-vue';
const store = useCounterStore()
const router = useRouter()
const class_list = ref([])
const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 15,
});
// 班级列表
const getClassesList = () => {
    teachClassesList({ page: pagination.current }, 'post').then((res: any) => {
        console.log(res)
        if(res.code == 200) {
            class_list.value = res.data.items
            pagination.total = res.data.total
        } else {
            message.error(res.message);
        }
    }).catch((err: any) => {
        console.log(err)
    })
}

const handleTableChange = (pag) => {
  console.log(pag)
  pagination.current = pag
  getClassesList()
};

// 去班级成员
const goClassesMember = (val:any) => {
    router.push({path: '/classesMember', query: { id: val}})
}
onMounted(() => {
    getClassesList()
});
</script>

<template>
  <div class="classes">
    <div class="classes_list">
        <a-card hoverable style="width: 300px;margin-right:20px;margin-bottom: 20px;" class="top-content-p" v-for="item in class_list" :key="item.id" @click="goClassesMember(item.id)">
            <template #actions>
                <!-- <setting-outlined key="setting" />
                <edit-outlined key="edit" />
                <ellipsis-outlined key="ellipsis" /> -->
            </template>
            <!--counts数量 status 10正常 20下架 30退出 -->
            <a-card-meta>
                <!-- <template #avatar> -->
                    <!-- <a-avatar :size="34">
                        <template #icon><UserOutlined /></template>
                    </a-avatar> -->
                <!-- </template> -->
                <template #title>
                    <div style="display: flex;justify-content: space-between;">
                        <div>{{ item.name }}</div>
                        <div>
                            <a-tag color="green" v-if="item.status = 10">正常</a-tag>
                            <a-tag color="cyan" v-else-if="item.status = 20">下架</a-tag>
                            <a-tag color="red" v-else-if="item.status = 30">退出</a-tag>
                        </div>
                    </div>
                </template>
                <template #description>
                    <div>
                        <div>{{ item.desc }}</div>
                        <div style="display: flex;justify-content: space-between;margin-top: 10px">
                            <div>{{ item.counts }} 人</div>
                            <div>{{ store.timestampChangDate(item.created_at * 1000) }}</div>
                        </div>
                    </div>
                </template>
            </a-card-meta>
        </a-card>
    </div>
    <div style="text-align: right;">
        <a-pagination v-model:current="pagination.current" :total="pagination.total" show-less-items @change="handleTableChange"  />
    </div>
  </div>
</template>

<style scoped>
.classes{
   padding: 10px;
}
.classes_list{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
</style>